<template>
  <el-row :gutter="20">
    <el-col 
      :xs="24" 
      :sm="{ span: 22}"
      :md="24"
      :lg="24"
      :xl="24"
    >
      <div class="content-container">
        <h1 class="title">{{ title }}</h1>
        <p class="description">{{ description }}</p>
        <slot name="extra"></slot>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>

const props = defineProps({
  title: {
    type: String,
    default: '响应式布局示例'
  },
  description: {
    type: String,
    default: '这是一个使用ElementPlus实现的响应式布局，在桌面端和移动端都能良好显示'
  }
});
</script>

<style scoped>
.content-container {
  padding: 20px;
  margin-bottom: 30px;
}

.title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #303133;
  line-height: 1.3;
}

.description {
  font-size: 1rem;
  line-height: 1.6;
  color: #606266;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .title {
    font-size: 1.5rem;
  }
  
  .description {
    font-size: 0.9rem;
  }
  
  .content-container {
    padding: 15px;
  }
}
</style>